<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card>
        <!-- 添加按钮区 -->
        <el-row>
            <el-col>
                <el-button type="primary" style="margin-bottom:20px" @click="showAddCateDialog">添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 表格区 -->
        <tree-table :data="cateList" :columns="columns"
        :selection-type="false" :expand-type="false" :show-index="true" 
        index-text='#' border :show-row-hover="false" class="treetable">
            <!-- 是否有效模板 -->
            <template slot="isOK" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                <i class="el-icon-error" v-else style="color:red"></i>
            </template>
            <!-- 排序模板 -->
            <template slot="order" slot-scope="scope">
                <el-tag type="primary" size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                <el-tag type="warning" size="mini" v-else>三级</el-tag>
            </template>
            <!-- 操作模板 -->
            <template slot="opt" slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="RemoveCateById(scope.row.cat_id)">删除</el-button>
            </template>
        </tree-table>

        <!-- 分页区 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
    title="添加分类"
    :visible.sync="addCateDialogVisible"
    width="50%"
    @close="addCateDialogClosed">
        <!-- 点击添加分类的表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <!-- 级联选择器，options指定数据源，props配置文件,v-model是选中的选项是一个数组包含一级和二级 -->
                <el-cascader
                v-model="selectedKeys"
                :options="parentCateList"
                :props="cascaderProps"
                @change="parentCateChanged" 
                clearable
                style="width:100%">
                </el-cascader>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog
    title="编辑分类"
    :visible.sync="editCateDialogVisible"
    width="50%"
    @close="editCateDialogClosed">
        <el-form :model="editCateForm" :rules="editCateFormRules" 
        ref="editCateFormRef" label-width="100px">
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="editCateForm.cat_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="editCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCate">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        data(){
            return {
                // 查询参数
                queryInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                // 商品分类的数据列表，默认为空，在created调用函数后获取
                cateList:[],
                // 总数据条数，用来实现分页
                total:0,
                // 每列的配置，每个配置都是一个对象，包含这一列的标题，这一列绑定的值
                columns:[
                    {
                        label:'家电',
                        prop:'cat_name'
                    },
                    // 自定义模板列，把type设置称template，在表格中写出一个isOK的作用域插槽
                    {
                        label:'是否有效',
                        // 把当前列指定为模板列
                        type:'template',
                        // 当前这一列使用的模板名称
                        template:'isOK'
                    },
                    // 自定义第三模板列
                    {
                        label:'排序',
                        type:'template',
                        template:'order'
                    },
                    // 自定义操作模板列
                    {
                        label:'操作',
                        type:'template',
                        template:'opt'
                    }
                ],

                // 控制添加分类对话框的显示与隐藏
                addCateDialogVisible:false,

                // 添加分类的表单对象
                addCateForm:{
                    cat_name:'',
                    cat_level:0,
                    cat_pid:0
                },
                // 添加分类的表单验证规则
                addCateFormRules:{
                    cat_name:[
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                },

                // 父级商品分类的数据列表
                parentCateList:[],

                // props指定配置对象：选中的值，展示的值，父子之间通过什么嵌套，触发的方式是什么
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger: 'hover'
                },
                // 选中的一级和二级
                selectedKeys:[],

                // 控制编辑分类的显示与隐藏
                editCateDialogVisible:false,

                // 根据id查询回来的编辑分类表单数据，用于渲染编辑的表单
                editCateForm:{},

                // 编辑分类的id，供后序使用，可以不需要了，因为得到的editCateForm中可以得到id
                // editCateId:0,

                // 编辑分类表单的验证规则
                editCateFormRules:{
                    'cat_name':[
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                    ]
                },
            }
        },
        created(){
            this.getCateList();
        },
        methods:{
            // 获取商品分类列表
            async getCateList(){
                const {data:res} = await this.$http.get('categories', { params:this.queryInfo });
                if(res.meta.status!==200) return this.$message.error('获取商品列表失败');
                
                console.log(res.data);
                this.cateList = res.data.result;
                this.total = res.data.total;
            },

            // 监听pagesize改变事件，给queryInfo中的pagesize重新赋值，再刷新列表
            handleSizeChange(newSize){
                this.queryInfo.pagesize=newSize;
                this.getCateList();
            },
            // 监听pagenum改变事件，给queryInfo中的pagesize重新赋值，再刷新列表
            handleCurrentChange(newPage){
                this.queryInfo.pagenum=newPage;
                this.getCateList();
            },
 
            // 点击添加，让对话框显示
            showAddCateDialog(){
                // 先获取父级列表，再展示对话框
                this.getParentCateList();
                this.addCateDialogVisible=true;
            },

            // 获取父级商品分类的数据列表
            async getParentCateList(){
                const {data:res} = await this.$http.get('categories',{params:{type:2}});
                if(res.meta.status!==200) return this.$message.error('获取父级商品分类列表失败');

                this.$message.success('获取父级商品分类列表成功');
                this.parentCateList = res.data;
                // console.log(res.data);
            },

            // 级联选择器中选择改变时
            parentCateChanged(){
               // 如果selectedKeys数组长度大于0，说明选择了分类
               if (this.selectedKeys.length>0){
                   // 把父级id拿到，同时把等级获取
                   this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1];
                   this.addCateForm.cat_level = this.selectedKeys.length;
                //    console.log(this.addCateForm);
               }else{
                   this.addCateForm.cat_pid = 0;
                   this.addCateForm.cat_level = 0;
                //    console.log(this.addCateForm);
               }
            },

            // 监听添加分类对话框的关闭事件,重置表单
            addCateDialogClosed(){
                this.$refs.addCateFormRef.resetFields();
                this.selectedKeys = [];
                this.addCateForm.cat_name = '';
                this.addCateForm.cat_level = 0;
                this.addCateForm.cat_pid = 0;
            },

            // 点击确定添加分类
            addCate(){
                this.$refs.addCateFormRef.validate(async valid=>{
                    if(!valid) return;
                    const {data:res} = await this.$http.post('categories',this.addCateForm);
                    if(res.meta.status!==201) return this.$message.error('添加分类失败');

                    this.$message.success('添加分类成功');
                    this.getCateList();
                    this.addCateDialogVisible = false

                })
            },

            // 点击编辑，根据传过来的id 查询分类名称，渲染到页面上
            async showEditCateDialog(id){
                // 查询对应的分类名称，渲染到页面上，再显示对话框
                const {data:res} = await this.$http.get(`categories/${id}`);    
                
                if(res.meta.status!==200) return this.$message.error('根据id查询分类失败');
                this.editCateForm = res.data;
                this.editCateDialogVisible = true;
            },

            // 监听关闭编辑对话框事件，重置对话框
            editCateDialogClosed(){
                this.$refs.editCateFormRef.resetFields();
            },

            // 确定编辑分类名称,需要用到id，所以在之前能获取的地方，把id保持在data中
            editCate(){
                this.$refs.editCateFormRef.validate(async valid=>{
                    if(!valid) return;
                    const {data:res} = await this.$http.put(`categories/${this.editCateForm.cat_id}`,{cat_name:this.editCateForm.cat_name});
                    if(res.meta.status!==200) return this.$message.error('更新分类名称失败');

                    this.$message.success('更新分类名称成功');
                    this.getCateList();
                    this.editCateDialogVisible = false;

                })
                
            
            },
            // 删除分类
            async RemoveCateById(id){
               const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>err);

                if(confirmResult !== 'confirm') return this.$message.info('已取消删除分类');

                const {data:res} = await this.$http.delete(`categories/${id}`);
                if(res.meta.status!==200) return this.$message.error('删除分类失败');
                this.$message.success('删除分类成功');
                this.getCateList();
            }
            
        }

    }
</script>

<style lang="less" scoped>
    .treetable{
        margin-bottom: 20px;
    }
</style>